<template>
  <div class="container" @click="$router.push('/article/'+item.id)">
    <div class="img-wrap">
      <img :src='item.img'>
      <div>
        <p>
          <span class=" icon-play2"></span>
          <span> 131</span>
        </p>
        <p>
          <span class="icon-file-text"></span>
          <span> 131</span>
        </p>
      </div>
    </div>
    <p>{{item.name}}</p>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 8px 5px;
  font-size: 12px;
  width: 172px;
  .img-wrap,
  img {
    width: 172px;
    height: 97px;
  }

  p {
    margin-top: 6px;
    font-size: 12px;
  }
}
.img-wrap {
  position: relative;
  > div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
  }
}
</style>
